<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from "@/api/api";

// 异步组件导入
import Coupon from "@/components/my/coupon.vue";

// 响应式数据
const loading = ref(false)
const finished = ref(false)
const active = ref(0)
const query = ref({
  couponStatus: "",
  pageNum: 1,
  pageSize: 10,
})
const list = ref([
  {
    id: 0,
    title: "铅酸电池抵扣券",
    content: "满100元可用",
    price: 100,
    type: "会员专属",
    status: 0, //0未使用，1已使用，2已失效
    rules:
      "<p>1.有效期为7天，逾期自动失效；</p><p>2.仅限安心修会员可用；</p><p>3.任意车型可用，到店享受车辆外观清洁清洗(不8包含沥青、电尸、车内吸尘及内\n" +
      "            部清洗);</p>",
  },
  {
    id: 1,
    title: "洗车体验券",
    content: "满0元可用",
    price: 200,
    type: "会员专属",
    status: 1, //0未使用，1已使用，2已失效
    rules:
      "<p>1.有效期为7天，逾期自动失效；</p><p>2.仅限安心修会员可用；</p><p>3.任意车型可用，到店享受车辆外观清洁清洗(不8包含沥青、电尸、车内吸尘及内\n" +
      "            部清洗);</p>",
  },
  {
    id: 2,
    title: "铅酸电池抵扣券",
    content: "满100元可用",
    price: 50,
    type: "普通",
    status: 2, //0未使用，1已使用，2已失效
    rules:
      "<p>1.有效期为7天，逾期自动失效；</p><p>2.仅限安心修会员可用；</p><p>3.任意车型可用，到店享受车辆外观清洁清洗(不8包含沥青、电尸、车内吸尘及内\n" +
      "            部清洗);</p>",
  },
])

// 路由
const router = useRouter()

// 方法定义
const onClickLeft = () => {
  router.back()
}

const getCouponList = async () => {
  let res = await api.my_coupon_list(query.value)
  console.log(res)
}

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push({
        id: list.value.length + i,
        title: "测试券",
        content: "满100元可用",
        price: 100,
        type: "普通",
        status: 0,
        rules: "<p>测试规则</p>"
      })
    }

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}

// 生命周期钩子
onMounted(() => {
  getCouponList()
})
</script>

<template>
  <div class="home">
    <van-nav-bar title="我的券包" class="nav_bar" fixed @click-left="onClickLeft">
    </van-nav-bar>
    <van-tabs v-model:active="active" type="card" title-active-color="#303030" title-inactive-color="#999" color="#fff">
      <van-tab title="全部" :name="0"></van-tab>
      <van-tab title="未使用" :name="1"></van-tab>
      <van-tab title="已使用" :name="2"></van-tab>
      <van-tab title="已失效" :name="3"></van-tab>
    </van-tabs>

    <div>
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <Coupon v-for="item in list" :key="item.id" :item="item"></Coupon>
      </van-list>
    </div>
  </div>
</template>


<style scoped lang="less">
.home {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 200px 50px 100px 50px;
  overflow: hidden;

  :deep(.van-nav-bar__content) {
    height: 100px;
    margin: 25px auto;
  }

  :deep(.van-nav-bar__title) {
    font-size: 54px;
    font-weight: 500;
  }

  :deep(.van-ellipsis) {
    overflow: initial;
  }
}

:deep(.van-tabs--card>.van-tabs__wrap) {
  height: 100px;
}

:deep(.van-tabs__nav--card) {
  height: 100px;
}

:deep(.van-tab) {
  font-size: 44px;
  line-height: 44px;
}
</style>
